<template>
  <div class="panel_box">
    <div @click="HandelSelect" class="drop_card flex items-center">
      <span class="flex-1">{{ dropValue }}</span>
      <img class="w-[8px] h-[6px] mr-2" src="@/assets/imgs/6.png" alt="" />
    </div>
    <!-- 下拉 -->
    <div class="drop_card_son" v-if="dropStatus == 2">
      <div v-for="(item, index) in options" :key="'2' + index">
        <div @click="handelChang(item.label)">{{ item.label }}</div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
const dropStatus = ref(1);
const dropValue = ref("测试");
let Num = ref(1);
const options = ref([
  {
    label: "测试1",
  },
  {
    label: "测试2",
  },
  {
    label: "测试3",
  },
]);

// 下拉事件
function handelChang(data) {
  dropValue.value = data;
  dropStatus.value = 1;
  Num.value = 1;
}
function HandelSelect() {
  Num.value++;
  Num.value % 2 == 0 ? (dropStatus.value = 2) : (dropStatus.value = 1);
  console.log(Num.value % 2, dropStatus.value, "11");
}
</script>

<style lang="scss" scoped>
.drop_card {
  color: #fff;
  width: 140px;
  padding-block: 10px;
  height: 40px;
  line-height: 40px;
  background-image: url("@/assets/imgs/xl.png");
  background-size: 100% 100%;
  text-align: center;
  cursor: pointer;
  font-size: 14px;
}
.drop_card_son {
  width: 140px;
  height: 183px;
  font-size: 14px;
  background-image: url("@/assets/imgs/xl2.png");
  background-size: 100% 100%;
  color: #e2efff;
  text-align: center;
  padding-block: 10px;
  padding-inline: 10px;
  position: absolute;
  top: 35px;
  cursor: pointer;
  div {
    width: 120px;
    height: 32px;
    line-height: 32px;
  }
  div:hover {
    background: rgba(62, 168, 209, 0.1);
    color: #00d5ff;
  }
}
</style>
